<template>
  <div>
    <el-row :gutter="20" style="margin-top:10px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>注册信息</span>
            </div>
            <div style="height: 100px">
              <el-avatar shape="square" :size="100" fit="fill" src="http://qom05wwz5.hd-bkt.clouddn.com/tx.jpg"></el-avatar>
            </div>
            <div style="height: 30px;line-height: 30px">
            </div>
            <div style="height: 50px;line-height: 50px">
              注册邮箱:{{user.email}}
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>基本资料</span>
            </div>
            <div>
              <el-form label-width="80px" :model="user" :rules="rules2" ref="user" label-position="right">
                <el-form-item prop="sex" label="性别：">
                  <el-input v-model="user.gender" readonly></el-input>
                </el-form-item>
                <el-form-item prop="name" label="昵称：">
                  <el-input v-model="user.name"></el-input>
                </el-form-item>
                <el-form-item prop="age" label="年龄：">
                  <el-input   placeholder="年龄" type="number" v-model="user.age"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="手机号：">
                  <el-input  placeholder="手机号" v-model="user.phone"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('user')">修改个人信息</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: "center",
    data(){
      let checkTel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (!this.checkMobile(value)) {
          callback(new Error('手机号不合法'))
        } else {
          callback()
        }
      }
      //验证昵称
      let checkName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入昵称'))
        } else {
          callback()
        }
      }
      return{
        user:{},
        dialogVisible: false,
        rules2: {
          phone: [{ validator: checkTel, trigger: 'change' }],
          name:[{validator: checkName, trigger: 'change'}]
        },

      }
    },
  methods:{
    handleBeforeUpload (file) {
      if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
        this.$notify.warning({
          title: '警告',
          message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
        })
      }
      let size = file.size / 1024 / 1024 / 2
      if (size > 2) {
        this.$notify.warning({
          title: '警告',
          message: '图片大小必须小于2M'
        })
      }
      axios.post("api/user/u",{file:file}).then(res=>{
        console.log(res.data)
      })
    },
    getUser:function () {
      var user=sessionStorage.getItem("user");
      axios.post("api/user/getUser",{name:user}).then(res=>{
        if (res.data.code==200){
          console.log(res.data.data)
          this.user=res.data.data;
        }
      })
    },
    // 验证手机号
    checkMobile(str) {
      let re = /^1\d{10}$/
      if (re.test(str)) {
        return true;
      } else {
        return false;
      }
    },
    // <!--提交注册-->
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          //此处接后端注册
          axios.post("/api/user/update",this.user).then(res=>{
            if (res.data.code==200){
              alert(res.data.mgs);
              location.reload()
            } else{
              alert(res.data.mgs);
            }
          })
        } else {
          console.log("提交失败!!");
          return false;
        }
      })
    },
  },
    mounted(){
      this.getUser()
    }

  }
</script>

<style>
  .clearfix{
    height: 20px;
    line-height: 20px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    height: 400px;
  }
  .dialog-footer{
    height: 30px;
    line-height: 30px;
    padding-top:10px ;
    padding-left: 10%;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
